<template>
  <div class="myorder-contanier">
    <el-tabs v-model="activeTab" type="border-card" @tab-click="handleTabClick">
      <el-tab-pane label="全部" name="全部">
        <OrderTable v-if="activeTab==='全部'" :status="activeTab" />
      </el-tab-pane>
      <el-tab-pane label="预约中" name="预约中">
        <OrderTable v-if="activeTab==='预约中'" :status="activeTab" />
      </el-tab-pane>
      <el-tab-pane label="预约成功" name="预约成功">
        <OrderTable v-if="activeTab==='预约成功'" :status="activeTab" />
      </el-tab-pane>
      <el-tab-pane label="美容进行中" name="美容进行中">
        <OrderTable v-if="activeTab==='美容进行中'" :status="activeTab" />
      </el-tab-pane>
      <el-tab-pane label="美容已完成" name="美容已完成">
        <OrderTable v-if="activeTab==='美容已完成'" :status="activeTab" />
      </el-tab-pane>
      <el-tab-pane label="已结束" name="已结束">
        <OrderTable v-if="activeTab==='已结束'" :status="activeTab" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import OrderTable from './components/orderTable'
export default {
  name: 'MyOrder',
  components: { OrderTable },
  data() {
    return {
      activeTab: '全部'
    }
  },
  created() {

  },
  methods: {
    handleTabClick(tab, event) {
      // this.$refs.child.getTable()
    }
  }
}
</script>

<style lang="scss">

</style>
